<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Companyleft active="jobList" />
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Companytitle name="编辑招聘职位" />
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
          <el-form-item label="所属行业" prop="industry">
            <div>
              <el-tag
                style="margin-right: 10px;"
                v-for="(item, index) in form.industry"
                @close="delIndustry(index)"
                :key="index"
                closable
                :disable-transitions="false">
                {{ item }}
              </el-tag>
            </div>
            <el-cascader
              v-if="form.industry.length < 5"
              style="width: 60%"
              :options="hangyelist"
              @change="hangyechange"
              placeholder="请选择行业"
              v-model="industrysel"
              clearable
              :show-all-levels="false"
              :props="{ value: 'name', label: 'name', children: 'contentSet'}"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="职位" prop="positionName">
            <el-input placeholder="请输入职位" v-model="form.positionName" style="width: 60%"/>
          </el-form-item>
          <el-form-item label="薪资" prop="wageRange">
            <el-select v-model="form.wageRange" :loading="hangyeLoading" placeholder="请选择薪资">
              <el-option
                :label="item.subTypeName"
                :key="index"
                :value="item.subTypeName"
                v-for="(item, index) in wageRange"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作地区" prop="cityCode">
            <Areas :form="addforms" @addresschange="addresschange" />
          </el-form-item>
          <el-form-item label="上班地址" prop="address">
            <el-input placeholder="请输入上班地址" v-model="form.address" style="width: 60%"/>
          </el-form-item>
          <el-form-item label="工作经验" prop="experience">
            <el-select v-model="form.experience" :loading="hangyeLoading" placeholder="请选择工作经验">
              <el-option
                :label="item.subTypeName"
                :key="index"
                :value="item.subTypeName"
                v-for="(item, index) in WorkYear"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最低学历" prop="educational">
            <el-select v-model="form.educational" :loading="xueliLoading" placeholder="请选择最低学历">
              <el-option
                :label="item.subTypeName"
                :key="index"
                :value="item.subTypeName"
                v-for="(item, index) in xuelilist"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="招聘人数" prop="zprs">
            <el-input placeholder="请输入招聘人数" v-model.number="form.zprs" style="width: 200px">
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
          <el-form-item label="职位福利" prop="fuli">
            <el-tag
              :key="index"
              v-for="(tag, index) in form.fuli"
              closable
              :disable-transitions="false"
              @close="delFuli(index)">{{ tag }}</el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput" >+ 添加新的</el-button>
            <el-button type="primary" style="margin-left: 30px;" size="small" @click="resetFuli" >重置
            </el-button>
          </el-form-item>
          <el-form-item label="岗位职责" prop="positionDuty">
            <el-input type="textarea" :rows="4" placeholder="请输入岗位职责" v-model="form.positionDuty" />
          </el-form-item>
          <el-form-item label="任职资格" prop="qualifications">
            <el-input type="textarea" :rows="4" placeholder="请输入任职资格" v-model="form.qualifications" />
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            
            <el-button 
              style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
              type="primary"
              @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Companytitle from '../../components/companytitle'
import Upload from '../../components/upload'
import Companyleft from '../../components/companyleft'
import {
  EnterpriseInfo,
  Position,
  addPosition,
  updatePosition,
  OccupationType,
  EducationState,
  TreatmentState,
  WageRangeState as getWageRangeState,
  WorkYearState
} from '../../assets/js/domains'
import Areas from '../../components/area'
export default {
  name: 'AddJob',
  components: { Companyleft, Upload, Companytitle, Areas },
  directives: {},
  data: function () {
    return {
      form: {
        address: '',
        cityCode: '',
        approval: '', // 1审核中 2审核通过 3拒绝
        educational: '',
        enterpriseUid: '',
        experience: '',
        industry: [],
        positionDuty: '',
        positionName: '',
        provinceCode: '',
        qualifications: '',
        saveCity: '',
        saveProvince: '',
        wageRange: '',
        welfareRemark: '',
        zprs: '',
        fuli:[],
      },
      rules:{
        address: [
          { required: true, message: '请输入上班地址', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        educational: [{ required: true, message: '请选择最低学历', trigger: 'change' },],
        experience: [{ required: true, message: '请选择工作经验', trigger: 'change' },],
        industry: [{ required: true, message: '请选择所属行业', trigger: 'change' },],
        positionDuty: [
          { required: true, message: '请输入岗位职责', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        positionName: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        qualifications: [
          { required: true, message: '请输入任职资格', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        wageRange: [{ required: true, message: '请选择薪资', trigger: 'change' },],
        cityCode: [{ required: true, message: '请输入工作地址', trigger: 'change' },],
        zprs: [
          { required: true, type:'number', message: '请输入招聘人数', trigger: 'blur' },
        ],
        fuli:[
          { required: true, validator: this.validFuli, trigger: 'blur' }
        ]
      },
      hangyeLoading: true,
      xueliLoading: true,
      hangyelist: [],
      industry: [],
      industrysel: [],
      xuelilist: [],
      showcity: false,
      position_id: '',
      companyFuli: [],
      fuli: [],
      addforms: {
        province: '',
        city: '',
        district: ''
      },
      inputVisible: false,
      uplaodstyle: { width: '120px', height: '160px' },
      inputValue: '',
      wageRange: [],
      WorkYear: []
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.position_id = this.$route.query.id
    this.form.enterpriseUid = localStorage.getItem('md_enterpriseUid')
    this.getWageRangeState()
    this.WorkYearState()
    this.enterprise_id = localStorage.getItem('md_user_uid')
  },
  computed: {
    
  },
  mounted: function () {
    this.getOccupationType()
    this.getEducationState()
    this.getEnterpriseInfo()

    if (this.position_id) {
      this.getpost()
    }
  },
  methods: {
    validIndustry(rule, value, callback){
      console.log(rule, value)
    },
    validFuli(rule, value, callback){
      if(!this.inputValue && !this.form.fuli.length){
        return callback('请输入职位福利')
      }
      this.validSensWords(null, this.inputValue, valid => {
        if(valid){
          callback(valid)
          return;
        }
        this.inputValue && this.form.fuli.push(this.inputValue)
        this.inputVisible = false
        this.inputValue = ''
        return callback()
      })
    },
    getEnterpriseInfo () {
      EnterpriseInfo({ enterprise_id: this.enterprise_id }).then(res => {
        if (res.code === 200) {
          this.companyFuli = res.data.treatment ? res.data.treatment.split(',') : []
          if(!this.position_id){
            this.form.fuli = [...this.companyFuli]
          }
        }
      })
    },
    
    resetFuli () {
      this.inputVisible = false
      this.inputValue = ''
      this.form.fuli = [...this.companyFuli]
    },
    delFuli(index) {
      this.form.fuli.splice(index, 1)
      console.log(this.form.fuli)
    },
    delIndustry(index) {
      this.form.industry.splice(index, 1)
    },
    hangyechange(e) {
      if (this.form.industry.indexOf(e[1]) < 0) {
        this.form.industry.push(e[1])
      }
      this.industrysel = []
    },
    cityClose: function () {
      this.form.saveCity = ''
    },
    showcitychange: function () {
      this.showcity = true
    },
    addresschange: function (e) {
      if (e.cityName) {
        this.form.cityCode = e.city
        this.form.saveCity = e.cityName
        this.form.saveProvince = e.provinceName
        this.form.provinceCode = e.province
      }
    },
    getEducationState: function () {
      const _this = this
      EducationState().then(function (res) {
        _this.xueliLoading = false
        if (res.code === 200) {
          _this.xuelilist = res.data
        }
      })
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          _this.hangyelist = res.data
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    
    showInput: function () {
      this.inputVisible = true
      const _this = this
      this.$nextTick(function () {
        _this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    onSubmit(){
      this.$refs.form.validate(valid => {
        if(!valid){
          this.$message.error('请完善后再保存！')
          return
        }
        if(!this.form.fuli || !this.form.fuli.length){
          this.$message.error('请输入职位福利')
          return
        }
        this.submitData()
      })
    },
    submitData() {
      const _this = this
      let params = Object.assign({}, this.form)
      params.industry = this.form.industry.join(',')
      params.welfareRemark = this.form.fuli.join(',')
      params.approval = '1' // 审核中
      if (this.position_id) {
        updatePosition(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('更新成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'companyCenter.html#/jobList'
              }
            })
          } else {
            _this.$alert(res.msg, '提示')
          }
        })
      } else {
        addPosition(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                window.location.href = 'companyCenter.html#/jobList'
              }
            })
          } else {
            _this.$alert(res.msg, '提示')
          }
        })
      }
    },
    getpost: function () {
      const _this = this
      Position({ position_id: this.position_id, userUid: '' }).then(function (res) {
        if (res.code === 200) {
          res.data.industry = res.data.industry ? res.data.industry.split(',') :[]
          res.data.fuli = res.data.welfareRemark ? res.data.welfareRemark.split(',').filter(item => !!item) :[]
          _this.form = res.data
          _this.addforms = {
            province: res.data.provinceCode,
            city: res.data.cityCode,
            district: res.data.cityCode
          }
        }
      })
    },
    getWageRangeState: function () {
      const _this = this
      getWageRangeState({}).then(function (res) {
        if (res.code == 200) {
          _this.wageRange = res.data
        }
      })
    },
    WorkYearState: function () {
      const _this = this
      WorkYearState({}).then(function (res) {
        _this.WorkYear = res.data
      })
    },
    industryRemove: function (index) {
      var industry = this.form.industry
      delete industry[index]
      this.form = Object.assign(this.form, { industry })
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/css/member";

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
